<template>
<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">我的地址</block>
	</cu-custom>	
	<view class="myAddress">		
	<view class="main">
		<block v-if="!noData && address.length">
			<scroll-view scroll-y class="srx">
				<view class="list">
						<view class="item" v-for="(item, index) in address" :key="index">
							<view @tap="selectAddr(item.id)">
							<view class="o-t">
								<view><text>{{ item.name }}</text><text>{{ item.phone }}</text></view>
							</view>
							<view class="o-a">
								<view><text v-if="item.is_default">默认</text>{{ item.location_p }}-{{ item.location_c }}-{{ item.location_a }} {{ item.address }}</view>
							</view>									
							</view>
							<view class="o-d">
								<radio-group @tap="setDefault(item)">
									<label class="radio">
										<view>
											<radio :class="['red',{checked: item.is_default}]" :checked="item.is_default ? true : false"></radio>
										</view>
										<view>设为默认</view>
									</label>								
								</radio-group>
								<view>
									<navigator :url="'/usercenter/editaddr?id='+item.id" hover-class="none"><image src="/static/edit.png"></image>编辑</navigator>
									<view @tap="delAddress(item.id)"><image src="/static/del.png"></image>删除</view>
								</view>
							</view>
						</view>						
				</view>
			</scroll-view>				
		</block>
		<block v-if="noData && !address.length">
			<empty-data src="/static/address.png"></empty-data>
		</block>
	</view>	
	<view class="add">
		<navigator url="/usercenter/addaddr" hover-class="none">
			<image src="/static/plus_w.png"></image>新增收货地址
		</navigator>
	</view>
	</view>	
</view>
</template>

<script>
	import { setDefault } from '@/common/api/users'
	import { mapActions } from 'vuex'
	import Mixin from './components/mixin'
	export default {
		name: 'myAddress',
		data() {
			return {
				noData: false,
				type: 0
			}
		},
		onLoad(opt) {
			this.type = opt.ad
		},
		mixins: [Mixin],
		onShow() {
			this.getList()
		},
		onHide() {
			this.noData = false			
		},
		methods: {
			selectAddr (id) {
				if (this.type) {
					uni.setStorageSync('buyAddr', id) // 设置收货地址ID
					uni.navigateBack()					
				}
			},
			LinkTo(item) {
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/editAddr/index?item=' + data
				})
			},
			getList() {
				this.getParams()
				uni.showLoading({ mask: true })
				this.getAddress(this.params).then(res => {
					uni.hideLoading()
					if (res.length) {
						this.noData = false
					} else {
						this.noData = true
					}
				})
			},
			setDefault(item) {
				if (!item.is_default) {
					const id = { id: item.id }
					setDefault(Object.assign({}, this.params, id)).then(res => {
						if (res.code === 400000) {
							this.address.forEach(m => { if (m.id !== item.id) m.is_default = 0 })
							item.is_default = 1							
							uni.showToast({ title: '设置成功' })
						}
					})					
				}
			},
			...mapActions([
				'getAddress'
			])			
		}
	}
</script>

<style lang="less">
	@import '../common/styles/variables.less'; 
	.fixedBody;
	.myAddress {
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		flex-direction: column;
		background-color:white;
		view { line-height: 1.4}
		.main {
			flex: 1;
			overflow: hidden;
			position: relative;
			.srx {
				height: 100%;
				.list {
					background-color: f6f6f6;
					.item {
						padding: 0 15px;
						color: #333;
						background: white;
						margin-bottom: 30upx;
						.border-bottom;
						&>view { font-size: 26upx }
						.o-t,
						.o-a,
						.o-d {
							display: flex;
							padding: 15upx 0;
						}
						.o-t ,.o-d {
							justify-content: space-between;
							align-items: center;							
						}
						.o-t {
							& > view:first-of-type {
								& > text {
									&:first-of-type { margin-right: 20upx;font-size:@title; }
									&:last-of-type { font-size:@minSize;color:@gray; }
								}
							}
						}
						.o-d {
							.radio {
								display: flex;
								align-items: center;
								justify-content: flex-start;
								& > view {
									margin-right: 10upx;
									&:last-of-type {
										font-size: @minSize;
									}
								}
							}
						}
						.o-a {
							position: relative;
							padding-top: 0;
							.border-bottom;
							text {
								color:@red;
								background-color:@baseColor;
								font-size:@minSize;
								padding:4upx 16upx;
								margin-right: 8upx;
							}
						}
						.o-d {
							radio-group { width: auto }
							&>view {
								&:first-of-type {
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
								&:last-of-type {
									display: flex;
									align-items: center;
									& > navigator { margin-right: 15upx;  }
									& > view, & > navigator {
										font-size: @minSize;
										white-space: nowrap;
										display: flex;
										justify-content: center;
										align-items: center;
										image {
											width: 30upx;
											height: 30upx;
											display: block;
											margin-right: 10upx;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.add {
			height: @height;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			box-sizing: border-box;
			& > navigator {
				background-color:@red;
				color:white;
				padding: 18upx 150upx;
				border-radius: 30upx;
				font-size:@minSize;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 22upx;
					height: 22upx;
					display: block;
					margin-right: 10upx;
				}
			}
		}
	}
</style>
